<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', Arial, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 30px 0;
            margin-bottom: 30px;
        }

        h1 {
            color: #2c3e50;
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .subtitle {
            color: #7f8c8d;
            font-size: 1.2rem;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
        }

        .card-header {
            background: linear-gradient(90deg, #3498db, #2c3e50);
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 25px;
        }

        .brand-table {
            width: 100%;
            border-collapse: collapse;
        }

        .brand-table th {
            background-color: #f8f9fa;
            color: #2c3e50;
            font-weight: 600;
            text-align: left;
            padding: 15px;
            border-bottom: 2px solid #e9ecef;
        }

        .brand-table td {
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            color: #495057;
        }

        .brand-table tr:hover td {
            background-color: #f8f9fa;
        }

        .status-active {
            color: #27ae60;
            font-weight: 500;
        }

        .status-inactive {
            color: #e74c3c;
            font-weight: 500;
        }

        .actions {
            display: flex;
            gap: 10px;
        }

        .stat-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: #3498db;
            margin: 10px 0;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 1rem;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
            margin-top: 30px;
        }

        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }

        .console {
            background: #2c3e50;
            color: #ecf0f1;
            border-radius: 8px;
            padding: 15px;
            margin-top: 25px;
            font-family: monospace;
            min-height: 100px;
            max-height: 200px;
            overflow-y: auto;
        }

        .console-title {
            color: #3498db;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .log-entry {
            margin-bottom: 5px;
            font-size: 0.9rem;
        }

        .log-success {
            color: #2ecc71;
        }

        .log-error {
            color: #e74c3c;
        }

        .log-info {
            color: #3498db;
        }

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }

            .actions {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <header>
            <h1>品牌管理系统</h1>
            <div class="subtitle">高效管理您的品牌信息</div>
        </header>

        <div class="grid">
            <div class="stat-card">
                <div class="stat-label">品牌总数</div>
                <div class="stat-value">{{ totalBrands }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">活跃品牌</div>
                <div class="stat-value">{{ activeBrands }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-label">本月新增</div>
                <div class="stat-value">12</div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h2>品牌列表</h2>
                <div class="search-bar">
                    <el-input placeholder="搜索品牌..." v-model="searchKeyword" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                    <el-button type="success" icon="el-icon-plus">添加品牌</el-button>
                </div>
            </div>
            <div class="card-body">
                <el-table :data="filteredBrands" class="brand-table" style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="name" label="品牌名称"></el-table-column>
                    <el-table-column prop="company" label="所属公司"></el-table-column>
                    <el-table-column prop="description" label="品牌描述"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                                <span :class="scope.row.status ? 'status-active' : 'status-inactive'">
                                    {{ scope.row.status ? '启用' : '禁用' }}
                                </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="排序" prop="order" width="80"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <div class="actions">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="editBrand(scope.row)"></el-button>
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        size="mini"
                                        @click="confirmDelete(scope.row)"
                                ></el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <div class="console">
            <div class="console-title">操作日志</div>
            <div v-for="(log, index) in logs" :key="index" class="log-entry" :class="'log-' + log.type">
                [{{ log.time }}] {{ log.message }}
            </div>
        </div>

        <div class="footer">
            © 2023 品牌管理系统 | Vue + Element UI + Axios 实现
        </div>
    </div>
</div>

<script>
    // 模拟数据
    const mockBrands = [
        { id: 1, name: 'Apple', company: '苹果公司', description: '全球领先的科技公司', status: true, order: 1 },
        { id: 2, name: 'Samsung', company: '三星电子', description: '韩国跨国电子公司', status: true, order: 2 },
        { id: 3, name: 'Huawei', company: '华为技术有限公司', description: '中国领先的通信技术公司', status: true, order: 3 },
        { id: 4, name: 'Xiaomi', company: '小米科技', description: '中国智能手机和电子产品制造商', status: true, order: 4 },
        { id: 5, name: 'Sony', company: '索尼集团', description: '日本跨国综合企业', status: true, order: 5 },
        { id: 6, name: 'Nokia', company: '诺基亚公司', description: '芬兰通信和信息技术公司', status: false, order: 6 },
    ];

    new Vue({
        el: '#app',
        data() {
            return {
                brands: [],
                searchKeyword: '',
                logs: []
            };
        },
        computed: {
            filteredBrands() {
                if (!this.searchKeyword) return this.brands;
                return this.brands.filter(brand =>
                    brand.name.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
                    brand.company.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
                    brand.description.toLowerCase().includes(this.searchKeyword.toLowerCase())
                );
            },
            totalBrands() {
                return this.brands.length;
            },
            activeBrands() {
                return this.brands.filter(brand => brand.status).length;
            }
        },
        mounted() {
            // 模拟从后端加载数据
            this.addLog('info', '正在加载品牌数据...');
            setTimeout(() => {
                this.brands = [...mockBrands];
                this.addLog('success', `成功加载 ${this.brands.length} 个品牌数据`);
            }, 800);
        },
        methods: {
            // 添加日志
            addLog(type, message) {
                const time = new Date().toLocaleTimeString();
                this.logs.unshift({ type, message, time });
                // 限制日志数量
                if (this.logs.length > 20) this.logs.pop();
            },

            // 编辑品牌
            editBrand(brand) {
                this.addLog('info', `准备编辑品牌: ${brand.name} (ID: ${brand.id})`);
            },

            // 确认删除
            confirmDelete(brand) {
                this.$confirm(`确定要删除品牌 "${brand.name}" 吗?`, '删除确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteData(brand.id);
                }).catch(() => {
                    this.addLog('info', `已取消删除品牌: ${brand.name}`);
                });
            },

            // 删除数据
            deleteData(id) {
                if (!id) {
                    this.addLog('error', '删除失败：无效ID');
                    return;
                }

                this.addLog('info', `正在删除品牌 (ID: ${id})...`);

                // 模拟 AJAX 请求
                axios.post('https://jsonplaceholder.typicode.com/posts', {
                    id: id,
                    operation: 'delete'
                })
                    .then(response => {
                        // 在实际项目中，这里应该是: if (response.data === "success")
                        // 模拟删除成功
                        this.brands = this.brands.filter(brand => brand.id !== id);
                        this.addLog('success', `品牌 (ID: ${id}) 删除成功`);

                        // 显示成功消息
                        this.$message({
                            message: '删除成功！',
                            type: 'success',
                            duration: 2000
                        });
                    })
                    .catch(error => {
                        this.addLog('error', `删除品牌 (ID: ${id}) 失败: ${error.message}`);
                        this.$message.error('删除失败，请重试');
                    });
            }
        }
    });
</script>
</body>
</html>